<template>
<div class="parent">
  <el-menu
      id="el-menu"
      :default-active="activeIndex2"
      mode="horizontal"
      background-color="#B22222"
      @select="handleSelect"
      text-color="#fff"
      active-text-color="#fff"
>
    <el-menu-item index="1" style="margin-left: 10%"><router-link to="/" class="router-link-active">首页</router-link></el-menu-item>
    <el-menu-item index="2"><router-link to="/clubA"  class="router-link-active">社团检索</router-link></el-menu-item>
    <el-submenu index="3">
      <template slot="title">社团快讯</template>
      <el-menu-item index="3-1"><router-link :to="{path:'/articleA',query:{uid:1}}" class="router-link-active">重要通知</router-link></el-menu-item>
      <el-menu-item index="3-2"><router-link :to="{path:'/articleA',query:{uid:2}}" class="router-link-active">社团要闻</router-link></el-menu-item>
    </el-submenu>
    <el-submenu index="4">
      <template slot="title">社团风采</template>
      <el-menu-item index="4-1"><router-link :to="{path:'/activityA',query:{uid:1}}" class="router-link-active">活动预告</router-link></el-menu-item>
      <el-menu-item index="4-2"><router-link :to="{path:'/activityA',query:{uid:2}}" class="router-link-active">精彩回顾</router-link></el-menu-item>
    </el-submenu>
    <el-menu-item index="5"><router-link to="/clubApplicant" class="router-link-active">社团申请</router-link></el-menu-item>
    <el-menu-item index="6" style="float: right;margin-right: 10%">
      <router-link v-if="!isLogin" to="/login" class="router-link-active">登录</router-link>
      <div v-else style="display: flex">
        <span>
         {{name}} ，你好
        </span>
        <span  style="margin-left: 2px"   class="router-link-active" @click="toLogout">退出</span>
      </div>
    </el-menu-item>
    <el-menu-item index="7" style="float: right;"><router-link to="/search" class="router-link-active"><span class="el-icon-search"></span></router-link></el-menu-item>
  </el-menu>

<!--  中间内容-->
  <div id="content">
    <router-view></router-view>
  </div>

</div>
</template>

<script>
import {logout} from "@/api";

export default {
  name: "Index",
  data() {
    return {
      activeIndex: '1',
      activeIndex2: '1',
      count: 0,
      url: '',
      name:'',
      srcList: [

      ],
      isLogin:false
    };
  },
  methods: {
    handleSelect(key, keyPath) {
      console.log(key, keyPath);
    },
    toLogout(){
      sessionStorage.clear();
      logout();
      this.$router.push("/login");
    },
    load(){
      this.count+=1;
    }
  },
  mounted() {
    sessionStorage.getItem('token') !== null ?this.isLogin=true:this.isLogin=false;
    this.name = sessionStorage.getItem('name');
  }
}
</script>

<style scoped>
.parent {
  position: relative;
}

.parent::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  opacity: 0.1;
  background: url(https://source.unsplash.com/random);
  z-index: -1;
}

#el-menu{
  height: 70px;
  width: 100%;
  position: fixed;
  top: 0;
  left: 0;
  z-index: 100;
}

#content{
  width: 80%;
  margin-left: 10%;
  margin-top: 70px;
}

.el-carousel__item h3 {
  color: #99a9bf;
  font-size: 18px;
  opacity: 0.75;
  line-height: 300px;
  margin: 0;
}


.router-link-active{
  color: white;
  text-decoration: none;
}
 a{
   display: block;
 }
</style>
